<template>
  <BasicModal :show="show" title="发送培训邮件" width="30%" :widthComfirm="true" @comfirm="comfirm"
    @closeModal="show = false">
    <template #content>
      <div class="btns">
        <Button size="small" class="copy" @click="copy" color="success">复制</Button>
        <Button size="small" @click="paste" color="error">粘贴</Button>
      </div>
      <CommonForm  :formList="formList" labelWidth="100px" ref="formRef"></CommonForm>
    </template>
  </BasicModal>
  <BasicModal :show="showPreview" title="培训邮件预览" width="70%" :loading="loading" :widthComfirm="true"
    @comfirm="comfirmSend" @closeModal="closePreviewModal">
    <template #content>
      <div class="agreement">
        <div class="content">
          <div v-for="(item) in contentList" v-html="item == 'null' ? '' : item"
            :class="['items', item == 'null' ? 'mt-30' : '']" :key="item">
          </div>
        </div>
      </div>
    </template>
  </BasicModal>
</template>

<script setup lang='ts'>
import { Button } from "@/components/Button";
import CommonForm from "@/views/applicationDetails/CommonForm.vue";
import BasicModal from "./BasicModal.vue";
import { copyText } from '@/utils/copyTextToClipboard'
import { ref, nextTick, watch } from "vue"
import type { IndexFormItem } from "@/views/ApplicationDetails/application-type.ts"
import { message } from "ant-design-vue";
import { trainingEmailSent, selectCommonConfigDetail, sendTrainingEmail, selectTrainingNumberFoTime, progressIndex } from "@/api/application-details/index.ts";
import { comStores } from '@/store/common/comStore';
import { getImageUrl } from "@/assets/common/common.ts";
import getEmailDetail from "@/assets/tool/email.ts"
const store = comStores()
const { userInFor } = store;
console.log(userInFor, 'userInFor')
const props = defineProps(['type', 'current'])

const show = ref<boolean>(false);
const showPreview = ref<boolean>(false);
const loading = ref<boolean>(false)
const formList = ref<IndexFormItem[]>([
  // { label: "报到时间", name: "reportTime", value: "", component: 'dateRange' },
  { label: "报到地点", name: "reportPlace", value: "", component: 'textarea' },
  // { label: "酒店地点", name: "hotelPlace", value: "", component: 'input' },
  // { label: "酒店电话", name: "hotelNumber", value: "", component: 'input' },
  // { label: "预计offer发放时间", name: "offerTime", value: "", component: 'datePicker', format: "YYYY-MM-DD" },
  // { label: "钉钉二维码有效期", name: "ddValidity", value: "", component: 'datePicker', format: "YYYY-MM-DD" },
  // {
  //   label: "培训校区", name: "trainArea", value: "", component: 'select', options: []
  // },

])

watch(() => show.value, async (val) => {
  if (val) {
    // const school = await selectCommonConfigDetail({ type: "SCHOOL_PLACE" });
    // formList.value[6].options = school.data;
    getData()
  }
})
const formRef = ref<any>(null)
const formInfo = ref<any>({});
const mailInfo = ref<any>({})
const comfirm = async () => {
  const res = await formRef.value.submitForm();
  console.log(res, 'res')
  let obj = {}
  res.forEach(el => {
    obj[el.name] = el.value
  })
  formInfo.value = obj;
  show.value = false;
  getContentList()
  await nextTick()
  console.log(formInfo.value)
  showPreview.value = true
}
const comfirmSend = async () => {
  console.log('发送培训邮件预览')
  const { resumeId, processId } = store.currentResume;
  console.log(props.type)
  const { reportPlace, reportTime, hotelPlace, hotelNumber, offerTime, trainArea, ddValidity } = formInfo.value
  if (props.type === 'sendAgain') {
    let param = {
      resumeId: resumeId,
      processId: processId,
      result: "通过",
      operator: userInFor.userName,
      reportAddress: reportPlace,
      hotel: hotelPlace,
      hotelPhone: hotelNumber,
    }
    loading.value = true
    const data = await sendTrainingEmail(param)
    loading.value = false
    if (data && data.code == '10000') {
      message.success("发送成功");
      showPreview.value = false;
      show.value = false;
    } else {
      message.error(data.msg)
    }
  } else {
    loading.value = true
    const data = await trainingEmailSent({
      resumeId: resumeId,
      processId: processId,
      result: "通过",
      operator: userInFor.userName,
      hotelPhone: hotelNumber,
      hotel: hotelPlace,
      reportAddress: reportPlace
    })
    loading.value = false
    if (data && data.code == '10000') {
      message.success("发送成功");
      showPreview.value = false;
      show.value = false;
      store.getResumeInfo(resumeId)
    } else {
      message.error(data.msg)
    }
  }


}

const closePreviewModal = () => {
  console.log('closePreviewModal')
  showPreview.value = false
}
const contentList = ref<string[]>([]);
const getContentList = async() => {
  contentList.value =await getEmailDetail(store.currentResume.userName,formInfo.value,mailInfo.value);

}
const copy = () => {
  let obj = {}
  formList.value.forEach(el => {
    obj[el.name] = el.value
  })
  copyText(JSON.stringify(obj))
}

const paste = async () => {
  const text = await navigator.clipboard.readText();
  let obj = JSON.parse(text);
  for (const key in obj) {
    const el = obj[key];
    formList.value.forEach(a => {
      if (a.name === key) {
        a.value = el
      }
    })
  }
}
const getData = async () => {
  const { resumeId } = store.currentResume
  const res = await progressIndex({ type: 0, resumeId });
  if (res && res.code === '10000') {
    console.log(res.data, 'res.data')
    const { trainingId } = res.data;
    const data = await selectTrainingNumberFoTime({ trainingNumberId: trainingId });
    console.log(data, '===>data')
    if (data && data.code == '10000') {
      mailInfo.value = data.data
    } else {
      message.error(data.msg)
    }
  }
}
defineExpose({ show })
</script>

<style lang="less" scoped>
.content {
  .items {
    margin-top: 5px;
  }
}

.mt-30 {
  margin-top: 20px !important;
}

.btns {
  position: absolute;
  right: 45px;
  top: -40px;

  .copy {
    margin-right: 10px;
  }
}
</style>

